<template>
      <el-row v-if="fieldValue">
        <el-col :span="24" >
          <template v-for="(item,inx) in data">
            <el-row :key="inx" style="margin-bottom:20px;">
              <el-col :span="18" >
                <el-row v-if="fieldValue">
                  <el-col :span="10" >
                      <el-input   v-model="item.label" @change="setValue">
                       <template v-if="$attrs.prepend" slot="prepend">{{$attrs.prepend}}</template>
                       <template v-if="$attrs.append" slot="append">{{$attrs.append}}</template>
                      </el-input>
                  </el-col>
                  <el-col :span="2" >
                    <div style="text-align:center;">{{$attrs['division'] || ':'}}</div>
                  </el-col>
                  <el-col :span="10" >
                      <el-input  v-model="item.value" @change="setValue">
                        <template v-if="$attrs.prependTow" slot="prepend">{{$attrs.prependTow}}</template>
                        <template v-if="$attrs.appendTow" slot="append">{{$attrs.appendTow}}</template>
                      </el-input>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6">
                  <el-button type="danger" icon="el-icon-delete" @click="delInput(inx)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-col>
         <el-col :span="24" style="margin-top:20px;">
          <el-row>
            <el-col :span="18">
              <label>{{$attrs.noteStr||'自定义扩展（键对值，最大可添加1000个字符）'}}</label>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" icon="el-icon-plus" @click.stop="addInput">添加</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
</template>

<script>
  export default {
    props: {
      value: {
        type: Array,
        defalut:()=>[]
      }
    },
    data(){
      return {
        data:[]
      }
    },
    computed: {
      fieldValue: {
        get() {
          return this.value;
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    },
    watch: {
      value(val) {
        this.data = [...val]
      },
    },
    methods:{
      addInput(){
        this.data.push({
          label:'',
          value:''
        });
        this.setValue();
        return false;
      },
      delInput(inx){
        this.data.splice(inx,1);
        this.setValue();
        return false;
      },
      setValue(){
        this.$emit('input', this.data)
      }
    }
  }
</script>


